/**************************************************************
 * The playerUI Object, control the div of (other) players area
 * @param {Object} player
 */
function PlayerUI(player){
    var _myself = this;
    var _dom_string = "\
<section class='player'>\
	<div class='top'>\
		<div class='profile'>\
			<img class='character card' src='./img/test.jpg'/>\
		</div>\
		<div class='cards'>\
			<div class='card-list red'></div>\
			<div class='card-list blue'></div>\
			<div class='card-list black'></div>\
		</div>\
	</div>\
	<div class='info'>							\
		<div class='name'>\
			WONG TSE YEUNG CSCI4140\
		</div>\
		<div class='function card'>0</div>\
		<div class='status'></div>\
	</div>\
	<div class='bar'><div class='load'></div></div>\
</section>";
    
    var _dom = $(_dom_string);
    var _dom_info = _dom.find('.info');
    var _dom_info_name = _dom_info.find('.name');
    var _dom_functions = _dom.find('.function');
    var _dom_cards = _dom.find(".cards");
    var _dom_blue_cards = _dom_cards.find(".blue");
    var _dom_red_cards = _dom_cards.find(".red");
    var _dom_black_cards = _dom_cards.find(".black");
    var _dom_status = _dom.find(".status");
    var _dom_character_pic = _dom.find('.character');
    var _dom_load = _dom.find(".load");
    
	this.timer = new Timer(_dom_load);
    
    this.dom = _dom;
    
    this.setName = function(name){
        _dom_info_name.html(name);
    }  
	
    this.setImage = function(src){
        _dom_character_pic.attr("src", src);
        return src;
    }      
    
	this.setRole = function(role){
		
	}

    this.setStatus = function(msg){
        _dom_status.html(msg);
    }
	
	this.resetCard = function(){
		_dom_functions.html(0);
		_dom_red_cards.children().each(function(){
			$(this).remove();
		});
		_dom_blue_cards.children().each(function(){
			$(this).remove();
		});
		_dom_black_cards.children().each(function(){
			$(this).remove();
		});
	}
	
       
    /**
     * Pass the player and update the entire DOM
     * @param {Object} player
     */
    this.update = function(player){
		_myself.setName(player.id + ":" +player.name);
		_myself.setImage(player.image);
		_myself.resetCard();
		var cards = player.messageCards;
		for(var i=0; i < cards.length; i++){
			_myself.addMessageCard(cards[i]);
		}
		cards = player.functionCards;
		for(var i=0; i < cards.length; i++){
			_myself.addFunctionCard(cards[i]);
		}
    }
	
    this.addMessageCard = function(card){
        //TODO
        var cardDom = helper_create_card(0,card);
        switch (card.color) {
            case RED_CARD:
                _dom_red_cards.append(cardDom);
                break;
            case BLUE_CARD:
                _dom_blue_cards.append(cardDom);
                break;
            case BLACK_CARD:
                _dom_black_cards.append(cardDom);
                break;
            default:
                _dom_black_cards.append(cardDom);
        }
    }
    
    this.addFunctionCard = function(card){
        _dom_functions.html(parseInt(_dom_functions.html()) + 1);
    } 
}